/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback, useState, useEffect } from "react";
import { Modal, Button, Row, Col, message, Alert } from "antd";
import { copy } from "@/utils/utils";
import { connect } from "dva";
import ChangeCourier from "./ChangeCourier";

const CheckQrCodeModal = props => {
  const {
    title,
    visible,
    showModal,
    channel,
    record,
    dispatch,
    type,
    qrCodeType,
    platformList = {},
    currentPage = {},
    refreshCurrent, // 刷新当前table页数据
  } = props;
  const { account, address, name, id } = record;
  const isOperator = channel == "operator"; // 判断是从业务员进入，还是快宝驿站进入
  const [qrcodeURL, setQrcodeURL] = useState("");
  const [messageInfo, setMessageInfo] = useState("");
  const [showChangeCourier, setShowChangeCourier] = useState(false);

  const { platformName } = platformList[qrCodeType] || {};

  useEffect(
    () => {
      visible &&
        dispatch({
          type: "wxQrCode/wxGetQrLink",
          payload: {
            type,
            account,
            platform: platformList[qrCodeType] && platformList[qrCodeType].platform,
          },
        }).then(res => {
          setQrcodeURL(res.qrcodeUrl);
        });
    },
    [visible, account, type, dispatch, qrCodeType, platformList]
  );

  useEffect(
    () => {
      let messageContent = "";
      if (qrCodeType == "weixin") {
        messageContent = (
          <span>
            客户扫码可以关注您的公众号：
            <a style={{ cursor: "auto" }}>{platformName}</a>
            ，并下单给对应的快递员，二维码永久有效确保客户资源不流失
          </span>
        );
      } else {
        messageContent = (
          <span>
            客户扫码可以访问您的小程序：
            <a style={{ cursor: "auto" }}>{platformName}</a>
            ，并下单给对应的快递员，二维码永久有效确保客户资源不流失
          </span>
        );
      }
      setMessageInfo(messageContent);
    },
    [qrCodeType, platformName]
  );

  const onCancel = useCallback(
    () => {
      showModal(false);
      setShowChangeCourier(false);
    },
    [showModal]
  );

  const onCopyClick = useCallback(text => {
    copy(text, copied => {
      if (copied) {
        message.success("复制成功！");
      } else {
        message.warning("复制失败，请手动复制！");
      }
    });
  }, []);

  const onConfirm = useCallback(
    value => {
      dispatch({
        type: "wxQrCode/changeQrcodeCourier",
        payload: {
          ...value,
          platform: platformList[qrCodeType] && platformList[qrCodeType].platform,
        },
      }).then(() => {
        onCancel();
        refreshCurrent && refreshCurrent(currentPage);
      });
    },
    [dispatch, onCancel, refreshCurrent, currentPage, platformList, qrCodeType]
  );

  return (
    <Modal
      destroyOnClose
      visible={visible}
      title={title}
      onCancel={onCancel}
      footer={null}
      width={1000}
    >
      <Alert message={messageInfo} type="info" showIcon />
      {showChangeCourier ? (
        <ChangeCourier
          type={type}
          id={id}
          isOperator={isOperator}
          name={name}
          account={account}
          address={address}
          onCancel={() => setShowChangeCourier(false)}
          onConfirm={onConfirm}
        />
      ) : (
        <>
          <Row type="flex" justify="center" align="middle">
            <Col style={{ textAlign: "center" }}>
              {qrcodeURL ? (
                <img src={qrcodeURL} alt="" style={{ width: 300, height: 300 }} />
              ) : (
                <Row
                  type="flex"
                  justify="center"
                  align="middle"
                  style={{ width: "100px", height: "100px" }}
                >
                  <Col>暂无二维码图片</Col>
                </Row>
              )}
            </Col>
          </Row>
          <Row type="flex" justify="center" gutter={[0, 48]}>
            <Col>
              <Button type="primary" onClick={() => onCopyClick(qrcodeURL)} disabled={!qrcodeURL}>
                复制网络地址
              </Button>
            </Col>
          </Row>
          <Row gutter={[0, 48]}>
            <Col>
              <Row type="flex" justify="space-around">
                <Col>
                  <span>
                    二维码对应
                    {isOperator ? "业务员" : "快宝驿站"}：
                  </span>
                  <span>{name}</span>
                </Col>
                <Col>
                  <span>账号：</span>
                  <span>{account}</span>
                </Col>
                <Col>
                  <span>{isOperator ? "站点" : "地址"}：</span>
                  <span>{address}</span>
                </Col>
                <Col>
                  <a onClick={() => setShowChangeCourier(true)}>更换业务员</a>
                </Col>
              </Row>
            </Col>
          </Row>
        </>
      )}
    </Modal>
  );
};

export default connect(({ platform }) => ({
  platformList: platform.platformList,
}))(CheckQrCodeModal);
